<template>
  <div >
  <el-carousel trigger="click"  class="carousel" >
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 class="small justify-center" text="2xl"><img :src=this.url style="object-fit: cover;width: 100%;height: 100%"></h3>
    </el-carousel-item>
  </el-carousel>
  </div>
  <div>
  </div>
  <div class="container">
    <div class="leftBox">
      <div class="leftmenu">
<!--        <el-menu class="el-menu-vertical-demo" style="background: linear-gradient(to left, #294956, #6696AC);">-->
<!--          <el-menu-item index="1"><span style="color: white;font-size: 22px">研究团队</span><el-icon style="margin-left: 100px;color: white" size="35px"><DArrowRight /></el-icon></el-menu-item>-->
<!--          <el-menu-item index="2"><span style="color: white;font-size: 22px">研究动向</span><el-icon style="margin-left: 100px;color: white" size="35px"><DArrowRight /></el-icon></el-menu-item>-->
<!--          <el-menu-item index="3"><span style="color: white;font-size: 22px">新闻动态</span><el-icon style="margin-left: 100px;color: white" size="35px"><DArrowRight /></el-icon></el-menu-item>-->
<!--          <el-menu-item index="4"><span style="color: white;font-size: 22px">论文下载</span><el-icon style="margin-left: 100px;color: white" size="35px"><DArrowRight /></el-icon></el-menu-item>-->
<!--        </el-menu>-->
        <p>
          <img src="../assets/图片1.png"  style="height:70%;width: 60%;margin-left: 20%;margin-top: 10%" />
        </p>

      </div>
    </div>
    <div class="rightBox">
      <span style="font-size: 2.2vw;display:block;text-indent:1em;" class = "info_title"  >玛卡巴卡实验室</span>
      <p/>
      <span style="font-size: 1.5vw;display:block;text-indent:2em;" class = "info" >
        玛卡巴卡未来科技实验室（Makabaka Laboratory of Future Technology，简称：MFT）是
        玛卡巴卡大学2019年成立的新型校级实体跨学科交叉科学研究所，未来实验室的成立是玛卡
        巴卡大学科研机制改革和推动跨学科交叉的重大举措。作为玛卡巴卡大学面向未来的技术孵化
        器，思想脑库，和未来科学的探索者，未来实验室本着不断创新、探索未来领域、突破学科壁
        垒的使命感，深入开展跨学科交叉研究与学术交流，产生引领性原始创新重大研究成果，推动
        学科建设和发展。以“计算、传播、媒体、艺术汇聚合一”为愿景，通过“原创性、交叉性、颠覆
        性”的无疆界技术创新，对人类认知、互动、逻辑产生变革，促进人机物融合社会发展，藉由文
        化、创业家精神融入，推动产业跨越式引领发展。力争成为在全球范围具有一定学术、产业和社
        会影响力的、国际一流水平的交叉学科实验室。
      </span>
  </div>
  </div>
  <el-footer class="footer" >
    <p style="color: white;font-size: 1vw" > {{this.footer_text[0]}}{{"\xa0\xa0\xa0"}}{{this.footer_text[1]}}{{"\xa0\xa0\xa0"}}{{this.footer_text[2]}}</p>
    <p style="color: white;font-size: 1vw">{{this.footer_text[3]}}</p>
    <p style="color: white;font-size: 1vw">{{this.footer_text[4]}}</p>
  </el-footer>
</template>
<script>

import request from "@/utils/request";
import Header from "@/components/Header";
import WebPage1 from "@/views/WebPage1";
import WebPage2 from "@/views/WebPage2";
import WebPage3 from "@/views/WebPage3";
import WebPage4 from "@/views/WebPage4";

export default {
  name:'Home',
  components:{
    Header,
    WebPage1,
    WebPage2,
    WebPage3,
    WebPage4,
  },
  data(){
    return{
      url:"https://ts1.cn.mm.bing.net/th/id/R-C.b199f484f412c3214485d96a17c22b53?rik=4MAMkVoWClY2bQ&riu=http%3a%2f%2fwww.kllvx.com%2ftupian%2fUploadFiles_7217%2f201107%2f2011071411195019.jpg&ehk=D%2fT%2fPodmZYka0e0upHmAEfv2nb3jqvEexengWAG6QN0%3d&risl=&pid=ImgRaw&r=0",
      form:{},
      dialogVisible:false,
      search:'',
      currentPage:1,
      pageSize:10,
      total:0,
      tableData:[
      ],
      footer_text:[
        "Tel: 010-62131231","Fax: 010-61232123","E-mail: mkbk@bit.edu.cn",
          "Address: BIT Laboratory of MAKABAKA","© MAKABAKA"
      ],
    }
  },
  created() {
    this.load();
  },
  methods:{
    load() {
      request.get("/user", {
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res=>{
        console.log(res);
        this.tableData=res.data.records;
        this.total=res.data.total;
      })
    },
    add(){
      this.dialogVisible=true;
      this.form={};
    },
    save(){
      if(this.form.id){
        request.put("/user", this.form).then(res=>{
          console.log(res);
          if(res.code=='0'){
            this.$message({
              type:"success",
              message:"修改成功"
            })
            
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }

        })
      }
      else {
        request.post("/user", this.form).then(res=>{
          console.log(res);
          this.$message({
            type:"success",
            message:"新增成功"
          })
        })
      }
      this.load();
      this.dialogVisible=false;
    },
    handleEdit(row){
      this.form=JSON.parse(JSON.stringify(row));
      this.dialogVisible=true;
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      this.pageNum=pageNum;
      this.load();
    },
    handDelete(id){
      console.log(id);
      request.delete("/user/"+id).then(res=>{
        if(res.code=='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load();
      })
    }
  }
}
</script>
<script setup>
import {DArrowRight} from '@element-plus/icons-vue';
</script>
<style>
.carousel{
  position: relative;
  margin-top: 4vw;
  width: 100%;
  height: 20vw;
  overflow: hidden;
}
.container{
  width: 100%;
  height: 40%;
  margin-top: 2vw;
  margin-bottom: 7vw;
}
.leftBox{

  width: 30%;
}
.rightBox{
  width:60%;
  margin-top: 0px;
  margin-left: 30%;
}
.info_title{
  top:0px;
  left: 0px;
  padding: 0px;
  font-weight: bolder;
  color: #4E798C;
}
.info{

}
.footer{
  position:fixed;
  width: 100%;
  bottom: 0px;
  margin-top: 1vw;
  height: 5vw;
  padding:0.5vw;
  background: #595656;
  text-align: center;

}
.leftmenu{
  padding-left:30px;
  padding-top: 30px;
  height: 20px;
  width:80%

}
</style>
